/*
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2024-05-09 13:28:37
 * @LastEditors: your name
 * @LastEditTime: 2024-05-09 14:10:41
 */
import * as echarts from "echarts";
import { lineColors } from "../store/staticData";

// 故障率曲线
const mistakeOpts = (dataSource) => {
  const option = {
    backgroundColor: "rgba(0,0,0,0)",
    grid: {
      left: "5%",
      right: "10%",
      top: "10%",
      bottom: "0%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: "rgba(50, 216, 205, 1)",
        },
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: 1,
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "#A1A7B3",
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },

        data: dataSource.map((item) => item.name),
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "",
        padding: 5,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#A1A7B3",
            type: "dashed",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          margin: 10,
          textStyle: {
            color: "#A1A7B3",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "今日",
        type: "line",
        smooth: true,
        stack: "总量",
        symbolSize: 5,
        showSymbol: false,
        itemStyle: {
          normal: {
            color: "#23D0C4",
            lineStyle: {
              color: "#23D0C4",
              width: 2,
            },
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(50, 216, 205, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(255, 255, 255, 0.2)",
                },
              ],
              false
            ),
          },
        },
        data: dataSource.map((item) => item.value),
      },
    ],
  };
  return option;
};

// 建设开工情况
// myChart echarts对象
// dataSource Array<{name,value}>
export const constructionOpts = (myChart, dataSource) => {
  const data = [];
  const data2 = [];
  for (let i = 0; i < dataSource.length; i++) {
    data.push(
      {
        value: dataSource[i].value,
        name: dataSource[i].name,
        itemStyle: {
          normal: {
            borderWidth: 8,
            shadowBlur: 20,
            borderRadius: 20,
            borderColor: lineColors[i],
            shadowColor: lineColors[i],
          },
        },
      },
      {
        value: 5,
        name: "",
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        },
      }
    );
    data2.push(
      {
        value: dataSource[i].value,
        name: dataSource[i].name,
      },
      {
        value: 5,
        name: "",
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
            opacity: 0.2,
          },
        },
      }
    );
  }

  let angle = 0; //角度，用来做简单的动画效果的
  const option = {
    backgroundColor: "#061740",
    color: lineColors,
    legend: {
      right: "10%",
      top: "40%",
      icon: "rect",
      itemWidth: 15,
      itemHeight: 15,
      textStyle: {
        color: "#ffffff",
      },
    },
    series: [
      {
        //外线1
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 3,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
              startAngle: ((0 + angle) * Math.PI) / 180,
              endAngle: ((90 + angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#4EE9E6",
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        //内线1
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 3,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
              startAngle: ((180 + angle) * Math.PI) / 180,
              endAngle: ((270 + angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#4EE9E6",
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        //外线2
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 3,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
              startAngle: ((270 + -angle) * Math.PI) / 180,
              endAngle: ((40 + -angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#4EE9E6",
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        //外线2
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 3,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
              startAngle: ((90 + -angle) * Math.PI) / 180,
              endAngle: ((220 + -angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#4EE9E6",
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        //绿点1
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          let x0 = api.getWidth() / 3;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
          let point = getCirlPoint(x0, y0, r, 90 + -angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: "#66FFFF", //粉
              fill: "#66FFFF",
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        //绿点2
        name: "ring5", //绿点
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          let x0 = api.getWidth() / 3;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
          let point = getCirlPoint(x0, y0, r, 270 + -angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: "#66FFFF", //粉
              fill: "#66FFFF",
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        //绿点3
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          let x0 = api.getWidth() / 3;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6;
          let point = getCirlPoint(x0, y0, r, 90 + angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: "#66FFFF", //粉
              fill: "#66FFFF",
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        //绿点4
        name: "ring5", //绿点
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          let x0 = api.getWidth() / 3;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6;
          let point = getCirlPoint(x0, y0, r, 270 + angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: "#66FFFF", //粉
              fill: "#66FFFF",
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "",
        type: "pie",
        clockWise: false,
        radius: ["98%", "95%"],
        hoverAnimation: false,
        center: ["33.33%", "50%"],
        top: "center",
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
          },
        },
        data: data,
      },
      {
        type: "pie",
        top: "center",
        startAngle: 90,
        clockwise: false,
        center: ["33.33%", "50%"],
        legendHoverLink: false,
        hoverAnimation: false,
        radius: ["94%", "55%"],
        itemStyle: {
          opacity: 0.15,
        },
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: data2,
      },
      {
        name: "",
        type: "pie",
        clockWise: false,
        center: ["33.33%", "50%"],
        radius: ["39%", "38%"],
        hoverAnimation: false,
        top: "center",
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
          },
        },
        data: data,
      },
    ],
  };

  //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
  function getCirlPoint(x0, y0, r, angle) {
    let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
    let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
    return {
      x: x1,
      y: y1,
    };
  }

  function draw() {
    angle = angle + 3;
    myChart.setOption(option, true);
    window.requestAnimationFrame(draw);
  }

  draw();
};

// 运营统计
// dataSource Array<{name,value}>
export const operateOpts = (dataSource) => {
  const img2 =
    "";
  const img =
    "";
  // 所有线路运营长度
  const sum = dataSource.reduce((cur, pre) => {
    return cur + pre.value;
  }, 0);
  const data = [];
  const legendData = [];
  dataSource.forEach((item, index) => {
    const { name, value } = item;
    let legendName = name.slice(-3) + "--" + value.toFixed(1) + "公里";
    legendData.push(legendName);
    data.push(
      {
        value: value.toFixed(0),
        name: legendName,
        itemStyle: {
          borderWidth: 5,
          shadowBlur: 20,
          borderColor: lineColors[index],
          shadowColor: lineColors[index],
        },
      },
      {
        value: sum / 25,
        name: "",
        itemStyle: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      }
    );
  });
  const seriesOption = [
    {
      name: "",
      type: "pie",
      radius: [55, 59],
      center: ["18.4%", "center"],
      emphasis: {
        scale: false,
      },
      label: {
        show: false,
      },
      data: data,
    },
  ];

  const option = {
    backgroundColor: "rgba(0,0,0,0)",
    color: lineColors,
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img2,
            width: 90,
            height: 90,
          },
          left: "9.4%",
          top: "center",
          position: [50, 50],
        },
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 30,
            height: 30,
          },
          left: "15.6%",
          top: "32%",
          position: [60, 100],
        },
        {
          type: "text",
          z: 3,
          style: {
            text: sum.toFixed(1),
            fill: "#fff",
            fontWeight: 400,
            fontSize: 12,
          },
          left: "15.5%",
          top: "60%",
          position: [100, 100],
        },
        {
          type: "text",
          z: 3,
          style: {
            text: "线路运营长度",
            fill: "#fff",
            fontWeight: 400,
            fontSize: 12,
          },
          left: "11.5%",
          top: "52%",
          position: [100, 100],
        },
        {
          type: "image",
          z: 3,
          style: {
            image: img2,
            width: 140,
            height: 140,
          },
          left: "4.5%",
          top: "center",
          position: [150, 150],
        },
      ],
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      icon: "roundRect",
      orient: "horizontal",
      data: legendData,
      right: 50,
      top: 30,
      align: "right",
      textStyle: {
        color: "#fff",
      },
      itemGap: 19,
      itemWidth: 20,
      itemHeight: 10,
      width: 380,
      itemStyle: {
        shadowColor: "rgba(0, 0, 0, 0.5)",
        shadowBlur: 12,
      },
    },
    series: seriesOption,
  };

  return option;
};

// 客流指标
export const guestsRateOpts = (dataSource) => {
  let salvProName = dataSource.map((item) => item.name);
  let salvProValue = dataSource.map((item) => item.value);
  let salvProMax = []; //背景按最大值
  for (let i = 0; i < salvProValue.length; i++) {
    salvProMax.push(1400);
  }

  const getSymbolData = (data) => {
    let arr = [];
    for (let i = 0; i < data.length; i++) {
      arr.push({
        value: data[i],
        symbolPosition: "end",
      });
    }
    return arr;
  };

  const option = {
    backgroundColor: "rgba(0, 0, 0, 0)",
    grid: {
      left: "18%",
      right: "0%",
      bottom: "-2%",
      top: "0%",

    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return params[0].name + " : " + params[0].value;
      },
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#C4F1FF",
          },
          rich: {
            a: {
              color: "#C4F1FF",
              fontWeight: "800",
              fontSize: 12,
            },
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: salvProName,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          textStyle: {
            color: "#C4F1FF",
            // fontSize: '12',
            fontWeight: "800",
          },
        },
        data: salvProValue,
      },
    ],
    series: [
      {
        name: "值",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgb(10, 116, 255,1)",
              },
              {
                offset: 1,
                color: "rgb(127,237,241,1)",
              },
            ]),
          },
        },
        z: 2,
        barWidth: 6,
        data: salvProValue,
      },
      {
        name: "XXX",
        type: "pictorialBar",
        symbol:
          "image://",
        symbolSize: [40, 40],
        symbolOffset: [20, 0],
        z: 10086,
        itemStyle: {
          normal: {
            color: "#0A74FF",
          },
        },
        data: getSymbolData(salvProValue),
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 6,
        barGap: "-100%",
        data: salvProMax,
        itemStyle: {
          normal: {
            color: "rgba(127,237,241,.4)",
            barBorderRadius: 30,
            // backgroundColor:'#091C24'
            // borderColor:'#00D1F0'
          },
        },
        z: 1,
      },
    ],
  };
  return option;
};

// 历史报警
// dataSource {去年:[{name:'一月',value:50},...],今年:[{name:'一月',value:50},...]}
export const historyWarning = (dataSource) => {
  const color = ["#1890FF", "#42d7b3"];
  const legendData = Object.keys(dataSource);
  const seriesData = [];
  let index = 0;
  for (let key in dataSource) {
    const data = dataSource[key].map((item) => item.value);
    seriesData.push({
      name: key,
      type: "line",
      smooth: true,
      symbol: "none", // 不显示连接点
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "line", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      lineStyle: {
        width: 3,
        shadowColor: color[index],
        shadowBlur: 20,
      },
      areaStyle: {
        opacity: 1,
        //右下左上
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color:
              index === 0 ? "rgba(24, 144, 255, .5)" : "rgba(71, 176, 138, .5)",
          },
          {
            offset: 0.3,
            color:
              index === 0 ? "rgba(24, 144, 255, .2)" : "rgba(71, 176, 138, .2)",
          },
          {
            offset: 1,
            color:
              index === 0 ? "rgba(24, 144, 255, 0)" : "rgba(71, 176, 138, 0)",
          },
        ]),
      },
      data: data,
    });
    index++;
  }

  const option = {
    backgroundColor: "rgba(0,0,0,0)",
    color: color,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "7%",
      right: "7%",
      bottom: "6%",
      top: "17%",
      containLabel: true,
    },
    legend: {
      icon: "rect",
      orient: "horizontal",
      left: "right",
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: "#fff",
        fontSize: "12px",
      },
      data: legendData,
    },
    xAxis: [
      {
        type: "category",
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        boundaryGap: false,
        axisTick: {
          show: false, // 不显示坐标轴刻度线
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "rgba(230, 247, 255, 0.50)",
          fontSize: 12,
        },
      },
    ],
    yAxis: [
      {
        name: '(次数)',
        type: "value",
        nameTextStyle: {
          align: 'right',
          color: 'rgba(230, 247, 255, 0.50)',
        },
        //y右侧文字
        axisLabel: {
          color: "rgba(230, 247, 255, 0.50)",
          fontSize: 12,
        },
        // y轴的分割线
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "rgba(230, 247, 255, 0.20)",
          },
        },
      },
    ],
    series: seriesData,
  };
  return option;
};
